<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组语法</title>
</head>
<body>

<div id="app">
    <div :class="[activeCls,errorCls]"></div>
</div>

<div id="app1">
    <div :class="isActive ? activeCls:'',errorCls"></div>
</div>

<div id="app2">
    <div :class="[{'active':isActive},errorCls]"></div>
</div>

<div id="app3">
    <div :class="classes"></div>

    <!--   <div class="btn btn-large btn-disabled"></div>   -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表。
     *
     *
     * 使用计算属性给元素动态设置类名，在涉及到组件复用时经常被使用，因此在涉及到表达式或者逻辑复杂时，应当优先使用计算属性。
     * */

    var app = new Vue({
        el: "#app",
        data: {
            activeCls: 'active',
            errorCls: 'error',
        }
    });

    //也可以使用三元表达式根据条件来切换
    var app1 = new Vue({
        el: "#app1",
        data: {
            isActive: true,
            activeCls: 'active',
            errorCls: 'error',
        }
    });

    //在数组语法中使用对象语法
    var app2 = new Vue({
        el: "#app2",
        data: {
            isActive: true,
            errorCls: 'error',
        }
    });

    //还可以和对象语法一样，使用data、computed、methods方法
    var app3 = new Vue({
        el: "#app3",
        data: {
            size: 'large',
            disabled: true,
        },
        computed: {
            classes: function () {
                return [
                    'btn',
                    {
                        ['btn-' + this.size]: this.size !== '',  //注意必须是采用这种写法
                        ['btn-disabled']: this.disabled
                    }
                ]
            }
        }
    });

</script>
</body>
</html>